<template>
  <div class="border bg-white p-5 pt-3 mt-5 mb-5">
    <n-tabs type="line" animated>
      <n-tab-pane name="All" tab="全部">
        <ResearchList :rawList="researchList" :isSelf="isSelf" />
      </n-tab-pane>
      <n-tab-pane name="JOUR" tab="期刊论文">
        <ResearchList :rawList="jourList" :isSelf="isSelf" />
      </n-tab-pane>
      <n-tab-pane name="CPAPER" tab="会议论文">
        <ResearchList :rawList="cpaperList" :isSelf="isSelf" />
      </n-tab-pane>
      <n-tab-pane name="DATA" tab="数据">
        <ResearchList :rawList="dataList" :isSelf="isSelf" />
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script setup>
import api from '@/api/api'
import ResearchList from '@/components/Research/ResearchList.vue'

const props = defineProps(['uid', 'isSelf'])

const researchList = ref([])
const jourList = ref([])
const cpaperList = ref([])
const dataList = ref([])

watch(researchList, () => {
  jourList.value = researchList.value.filter((item) => item.type === 'JOUR')
  cpaperList.value = researchList.value.filter((item) => item.type === 'CPAPER')
  dataList.value = researchList.value.filter((item) => item.type === 'DATA')
})

onMounted(() => {
  init()
})

const init = () => {
  api.Research.getResearchList({ id: props.uid }).then((res) => {
    if (res.success) {
      researchList.value = res.data.list
    }
  })
}
</script>

<style scoped></style>
